<template>
	<div>
		<div class="el-one">
			<div class="card-one">
				<el-card>
					<div class="title">冷站</div>
					<div class="nh_css">
						<div>能耗：
							<el-select v-model="value" style="width: 120px" size="small">
								<el-option label="RMB" value="RMB" />
								<el-option label="kWh" value="kWh" />
								<el-option label="kgCO²" value="kgCO²" />
								<el-option label="tce" value="tce" />
							</el-select>
						</div>

						<div class="ms">
							<p>当年（去年）<span class="pFont">2,560,080</span><span class="ps">(2,235,080)</span></p>
							<p style="margin-right: 50px">当月（去年同月）<span class="pFont">123,080</span> <span
									class="ps">(1,080)</span>
							</p>
						</div>
						<p>当日（昨日）<span class="pFont">500</span><span class="ps">(500)</span></p>
						<div class="ms">
							<p>冷站效率（累计）：<span class="pFont">5.2</span><span class="ps">KW/kw</span><span class="pFont"
									style="margin-left: 40px">0.61</span><span class="ps">kw/ton</span></p>
							<p>冷站效率（实时）：<span class="pFont">5.6</span><span class="ps">KW/kw</span><span class="pFont"
									style="margin-left: 40px">0.63</span><span class="ps">kw/ton</span></p>
						</div>

					</div>
					<div class="ech-one">
						<div style="height: 300px">
							<scEcharts :option="option1"></scEcharts>
						</div>
						<div class="rq">
							<el-date-picker v-model="time" value-format="YYYY-MM-DD" @change="timee" type="daterange"
								range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" size="small"
								style="width: 210px" />
						</div>
					</div>

					<div class="ech-two">
						<div style="height: 300px; width: 730px;">
							<scEcharts :option="option2"></scEcharts>
						</div>
						<div class="rq">
							<el-select v-model="select" style="width: 80px" size="small">
								<el-option label="kWh" value="kWh" />
								<el-option label="kWh/%" value="kWh/%" />
							</el-select>
						</div>
					</div>
				</el-card>
			</div>
			<div class="card-two">
				<el-card>
					<div class="title">实时运行参数</div>
					<div class="head">
						<p>冷机运行台数：<span class="pFont">1</span><span class="ps">台</span></p>
						<p>总功率：<span class="pFont">365.6</span><span class="ps">kw</span></p>
						<p>冷量：<span class="pFont">306.6</span><span class="ps">ton</span></p>
					</div>
				</el-card>
				<el-card style="margin-top: 13px">
					<div class="centt">
						<div class="titles">热平衡</div>
						<div>
							<el-date-picker v-model="time1" type="daterange" range-separator="至"
								start-placeholder="开始时间" end-placeholder="结束时间" style="width:200px;margin: 0 20px"
								size="small" value-format="YYYY-MM-DD" @change="timee4" />
						</div>
					</div>
					<div class="qwe">
						<div style="height: 250px;">
							<scEcharts :option="option3"></scEcharts>
						</div>

						<div class="reph">
							<div>热平衡率</div>
							<div><span class="pFont">98%</span><span class="ps">（95 150%）</span></div>
						</div>
					</div>
				</el-card>
				<el-card style="margin-top: 13px;height: 382px">
					<div class="shebei">
						<div>设备运行时间（小时）</div>
						<div>
							<el-date-picker v-model="time2" type="daterange" range-separator="至"
								start-placeholder="开始时间" end-placeholder="结束时间" style="width:200px;margin: 0 20px"
								size="small" />
						</div>
					</div>
					<div class="tabl" style="width: 680px;">
						<el-table :data="tableData" border :cell-style="{ color: '#7695d1' }"
							:header-cell-style="{ backgroundColor: '#fcfdfe' }">
							<el-table-column label="冷机" align="center">
								<el-table-column prop="one" label="#1冷机" align="center" />
								<el-table-column prop="ones" label="#2冷机" align="center" />
							</el-table-column>
							<el-table-column prop="two" label="冷冻泵" align="center" />
							<el-table-column prop="three" label="冷却泵" align="center" />
							<el-table-column prop="four" label="冷却塔" align="center" />
						</el-table>
					</div>
				</el-card>
			</div>
		</div>
		<div class="el-two">
			<div class="card-one">
				<el-card>
					<div class="title">用能成本分析（冷量）</div>
					<div class="head">
						<div>累计用能成本<span class="pFont">0.632</span><span class="ps">RMB/kWh</span></div>
						<div>当月用能成本<span class="pFont">0.632</span><span class="ps">RMB/kWh</span></div>
						<div>当日用能成本<span class="pFont">0.632</span><span class="ps">RMB/kWh</span></div>
					</div>
					<div class="head_ss">
						<el-select v-model="select1" style="width: 80px" size="small">
							<el-option label="小时" value="小时" />
						</el-select>
						<el-date-picker v-model="time3" type="daterange" range-separator="至" start-placeholder="开始时间"
							end-placeholder="结束时间" style="width:200px;margin: 0 20px" size="small"
							value-format="YYYY-MM-DD" @change="timee3" />
					</div>
					<div style="height: 300px; width: 730px;">
						<scEcharts :option="option4"></scEcharts>
					</div>
				</el-card>
			</div>
			<div class="card-two">
				<el-card>
					<div class="title">峰平谷分析</div>
					<div class="hea-one">
						<ul>
							去年累计电量
							<li>总 <span class="mm">32,000</span><span class="nn">kWh</span></li>
							<li>峰 <span class="mm">32,000</span><span class="nn">26.03%</span></li>
							<li>平 <span class="mm">32,000</span><span class="nn">26.03%</span></li>
							<li>台 <span class="mm">32,000</span><span class="nn">26.03%</span></li>
						</ul>

						<ul>
							该段时间内
							<li>总 <span class="mm">32,000</span><span class="nn">kWh</span></li>
							<li>峰 <span class="mm">32,000</span><span class="nn">26.03%</span></li>
							<li>平 <span class="mm">32,000</span><span class="nn">26.03%</span></li>
							<li>台 <span class="mm">32,000</span><span class="nn">26.03%</span></li>
						</ul>
						<div class="con-two">
							<el-select v-model="select3" style="width: 80px" size="small">
								<el-option label="小时" value="小时" />
							</el-select>
							<el-date-picker v-model="time5" type="daterange" range-separator="至"
								start-placeholder="开始时间" end-placeholder="结束时间" style="width:200px;margin: 0 20px"
								size="small" />
						</div>
					</div>
					<div class="con">
						<div class="con-one">峰平谷用能分析</div>
						<div class="con-two">
							<el-select v-model="select2" style="width: 80px" size="small">
								<el-option label="小时" value="小时" />
							</el-select>
							<el-date-picker v-model="time4" type="daterange" range-separator="至"
								start-placeholder="开始时间" end-placeholder="结束时间" style="width:200px;margin: 0 20px"
								size="small" value-format="YYYY-MM-DD" @change="timee1"/>
						</div>
					</div>
					<div style="height: 182px">
						<scEcharts :option="option5"></scEcharts>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script setup>
import scEcharts from "@/components/scEcharts";
import { onMounted, reactive, ref } from "vue";
import { ProjectGroupone,Analysis } from "@/api/model/echarts";
// import { type } from "os";
// import { number } from "echarts";

const value = ref('kWh')
const time = ref('')
const time1 = ref('')
const time2 = ref('')
const time3 = ref('')
const time4 = ref('')
const time5 = ref('')
const select = ref('kWh')
const select1 = ref('小时')
const select2 = ref('月')
const select3 = ref('全部')
const option1 = reactive({
	title: {
		text: '冷站效率分项',
		textStyle: {
			color: '#aaacab',
		},
		top: 30
	},
	legend: {
		data: ['制冷机', '冷却水泵', '冷冻水泵', '冷却塔风机'],
		left: 270,
		top: 30,
		itemWidth: 15,
		itemHeight: 1,
	},
	grid: {
		left: '1%',
		right: '1%',
		bottom: '10%',
		top: '35%',
		containLabel: true
	},
	xAxis: {
		name: '日',
		data: []
	},
	yAxis: {
		name: 'KW/ton',
		type: 'value',
		axisLine: {
			// x轴线隐藏，但不隐藏背景线
			show: true,
		},
	},
	tooltip: {
		trigger: 'axis',
	},
	series: [
		{
			name: '制冷机',
			type: 'line',
			stack: 'Total',
			data: [],
			color: '#d90909'
		},
		{
			name: '冷却水泵',
			type: 'line',
			stack: 'Total',
			data: [],
			color: '#FFC40F'
		},
		{
			name: '冷冻水泵',
			type: 'line',
			stack: 'Total',
			data: [],
			color: '#CCCCCC'
		},
		{
			name: '冷却塔风机',
			type: 'line',
			stack: 'Total',
			data: [],
			color: '#0384DD'
		},
	]
})
const option2 = reactive({
	title: {
		text: '设备用能占比',
		textStyle: {
			color: '#aaacab',
		},
		left: 23,
		top: 20
	},
	legend: {
		orient: 'vertical',
		right: 30,
		bottom: 25,
		itemWidth: 15
	},
	tooltip: {
		trigger: 'axis',
	},
	grid: {
		left: '3%',
		right: '15%',
		bottom: '3%',
		top: '30%',
		containLabel: true
	},
	dataset: {
		source: [
		]
	},
	xAxis: { type: 'category' },
	yAxis: {
		name: 'RMB/m²', axisLine: {
			// x轴线隐藏，但不隐藏背景线
			show: true,
		},
	},
	series: [
		{ type: 'bar', barGap: 0, color: '#90cd50' },
		// { type: 'bar', barGap: 0, color: '#ffc000' },
		// { type: 'bar', barGap: 0, color: '#d6ebfa' },
		// { type: 'bar', barGap: 0, color: '#0070c0' },
	]
})
const option3 = reactive({
	title: {
		text: '热平衡率趋势线',
		textStyle: {
			color: '#8f9898',
		},
		top: 2,
		left: 115
	},
	xAxis: {
		name: '日',
		data: []
	},
	yAxis: {
		name: '%',
		type: 'value',
		axisLine: {
			// x轴线隐藏，但不隐藏背景线
			show: true,
		},
	},
	grid: {
		left: '15%',
		right: '7%',
		bottom: '10%',
		top: '25%',
		containLabel: true
	},
	tooltip: {
		trigger: 'axis',
	},
	series: [
		{
			data: [1],
			type: 'line',
			smooth: true,
			areaStyle: {
				color: '#fdf2ce',
				opacity: 0.5
			},
			color: '#ffc40f'
		}
	]
})
const option4 = reactive({
	title: {
		text: '用能成本分析',
		textStyle: {
			color: '#8f9898',
		},
		left: 20,
		top: 13,
	},
	xAxis: {
		name: '日',
		data: []
	},
	yAxis: {
		name: '%',
		type: 'value',
		axisLine: {
			// x轴线隐藏，但不隐藏背景线
			show: true,
		},
	},
	grid: {
		left: '3%',
		right: '7%',
		bottom: '10%',
		top: '25%',
		containLabel: true
	},
	tooltip: {
		trigger: 'axis',
	},
	series: [
		{
			data: [2, 6, 10, 11, 6, 3, 11, 2, 8, 3],
			type: 'line',
			smooth: true,
			areaStyle: {
				color: '#fdf2ce',
				opacity: 0.5
			},
			color: '#ffc40f'
		}
	]
})
const option5 = reactive({
	tooltip: {
		trigger: 'axis',
	},
	legend: {
		orient: 'vertical',
		right: 30,
		bottom: 25,
		itemWidth: 15
	},
	grid: {
		left: '3%',
		right: '15%',
		bottom: '3%',
		containLabel: true
	},
	xAxis: [
		{
			name: '月',
			data: []
		}
	],
	yAxis: [
		{
			type: 'value',
			name: "kWh",
			axisLine: {
				// x轴线隐藏，但不隐藏背景线
				show: true,
			},
		}
	],
	series: [
		{
			name: '冷却塔',
			type: 'bar',
			stack: 'Ad',
			emphasis: {
				focus: 'series'
			},
			data: [],
			color: '#90cd50'
		},
		{
			name: '冷冻泵',
			type: 'bar',
			stack: 'Ad',
			emphasis: {
				focus: 'series'
			},
			data: [],
			color: '#FFC40F'
		},
		{
			name: '冷却泵',
			type: 'bar',
			stack: 'Ad',
			emphasis: {
				focus: 'series'
			},
			data: [],
			color: '#EAF2FA'
		},
		{
			name: '制冷机',
			type: 'bar',
			stack: 'Ad',
			emphasis: {
				focus: 'series'
			},
			data: [],
			color: '#0070c0'
		},
	]
})
const tableData = ref([
	{
		one: 105,
		ones: 0,
		two: '',
		three: '',
		four: ''
	},
	{
		one: 105,
		ones: 0,
		two: '',
		three: '',
		four: ''
	},
	{
		one: 105,
		ones: 0,
		two: '',
		three: '',
		four: ''
	},
	{
		one: 105,
		ones: 0,
		two: '',
		three: '',
		four: ''
	},
])
const state = reactive({
	//冷战
	cold_war: {
		indicatorName: "冷站效率分项",
		firstType: "冷站能效",
		secondType: "",
		thirdType: "",
		dataType: 'day',
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02"
	},
	//设备用能占比
	proportion: {
		indicatorName: "设备用能占比",
		firstType: "冷站能效",
		secondType: "",
		thirdType: "",
		dataType: 'day',
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02"
	},
	//用能成本分析
	analyse: {
		indicatorName: "用能成本分析",
		firstType: "冷站能效",
		secondType: "",
		thirdType: "",
		dataType: 'day',
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02"
	},
	//热平衡
	heat_balance: {
		indicatorName: "热平衡",
		firstType: "冷站能效",
		secondType: "",
		thirdType: "",
		dataType: 'day',
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02"
	},
	//峰平谷用能分析
	energy: {
		indicatorName: "峰平谷用能分析",
		firstType: "冷站能效",
		secondType: "",
		thirdType: "",
		dataType: 'hour',
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02"
	},
})
//冷战
const getcold_war = async () => {
	let res = await ProjectGroupone(state.cold_war)
	const z = []
	if (res.code == 200) {
		res.data.commonDailyDataList.forEach((item) => {
			z.push(`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`)
			if (item.type == "type1") {
				option1.series[0].data.push(item.number1)
			}
			else if (item.type == "type2") {
				option1.series[1].data.push(item.number1)
			}
			else if (item.type == "type3") {
				option1.series[2].data.push(item.number1)
			}
			else if (item.type == "type4") {
				option1.series[3].data.push(item.number1)
			}
		});

	}
	z.forEach((item2, index2) => {
		z.forEach((item1, index1) => {
			if (z[index2] == z[index1]) {
				z.splice(index1, 1)
			}
		})
	});
	option1.xAxis.data = z
}
//冷站时间
const timee = () => {
	console.log(time.value._rawValue);
	state.cold_war.dayFrom = time.value._rawValue[0]
	state.cold_war.dayTo = time.value._rawValue[1]
	getcold_war()
}
//设备用能占比
const getproportion = async () => {
	let res = await ProjectGroupone(state.cold_war)
	console.log(res, '数据评价');
	var xlist = []
	res.data.commonDailyDataList.forEach((item) => {
		item.day = `${item.day.substring(0, 4)}`
		if (!xlist.includes(item.day)) {
			xlist.push(item.day)
		}
	})
	const datalist = []
	for (var i = 0; i < xlist.length; i++) {
		const s = res.data.commonDailyDataList.filter((item) => {
			return item.day == xlist[i]
		})
		datalist.push(s)
	}
	const vl = ["type1", "type2", "type3", "type4"]
	const datall = []
	for (var x = 0; x < vl.length; x++) {
		for (var z = 0; z < datalist.length; z++) {
			const s = datalist[z].filter((item) => {
				return item.type == vl[x]
			})
			datall.push(s)
		}
	}
	const datashuju = []
	const zhi = ["制冷机", "冷却泵", "冷却液", "冷却塔"]
	for (var s = 0; s < datall.length; s++) {
		var v = 0
		for (var l = 0; l < datall[s].length; l++) {
			v += datall[s][l].number1
		}
		datashuju.push([zhi[s], v])
	}

	xlist.unshift('product')

	datashuju.unshift(xlist)
	console.log(datashuju);
	option2.dataset.source = datashuju

}
//用能成本分析
const getanalyse = async () => {
	let res = await ProjectGroupone(state.analyse)
	const z = []
	var xlist = []
	res.data.commonDailyDataList.forEach((item) => {
		if (!z.includes(item.day)) {
			z.push(item.day)
		}
		item.day = `${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`
		if (!xlist.includes(item.day)) {
			xlist.push(item.day)
		}
	})
	option4.xAxis.data = xlist
	const datalist = []
	for (var i = 0; i < xlist.length; i++) {
		const s = res.data.commonDailyDataList.filter((item) => {
			return item.day == xlist[i]
		})
		datalist.push(s)
	}

	const datashuju = []

	for (var s = 0; s < datalist.length; s++) {
		var v = 0
		for (var l = 0; l < datalist[s].length; l++) {
			v += datalist[s][l].number1
		}
		datashuju.push(v)
	}
	option4.series[0].data = datashuju

}
//用能成本分析时间
const timee3 = () => {
	console.log(time3.value._rawValue);
	state.analyse.dayFrom = time3.value._rawValue[0]
	state.analyse.dayTo = time3.value._rawValue[1]
	console.log(state.analyse);
	getanalyse()
}
//热平衡
const getheat_balance = async () => {
	let res = await ProjectGroupone(state.heat_balance)
	var xlist = []
	res.data.commonDailyDataList.forEach((item) => {
		item.day = `${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`
		if (!xlist.includes(item.day)) {
			xlist.push(item.day)
		}
	})
	option3.xAxis.data = xlist
	const datalist = []
	for (var i = 0; i < xlist.length; i++) {
		const s = res.data.commonDailyDataList.filter((item) => {
			return item.day == xlist[i]
		})
		datalist.push(s)
	}
	const datashuju = []

	for (var s = 0; s < datalist.length; s++) {
		var v = 0
		for (var l = 0; l < datalist[s].length; l++) {
			v += datalist[s][l].number1
		}
		datashuju.push(v)
	}
	option3.series[0].data = datashuju
}
//热平衡时间
const timee4 = () => {
	console.log(time1.value._rawValue);
	state.heat_balance.dayFrom = time1.value._rawValue[0]
	state.heat_balance.dayTo = time1.value._rawValue[1]
	console.log(time1.value._rawValue);
	getheat_balance()
}
//用能分析
const getenergy = async () => {
	let res = await Analysis(state.energy)
	console.log(res);
	if (res.code == 200) {
		console.log(res.data.commonHourlyDataList);
		var xlist = []
		res.data.commonHourlyDataList.forEach((item) => {
			item.day = `${item.day.substring(6, 7)}`
			if (!xlist.includes(item.day)) {
				xlist.push(item.day)
			}
		})
		option5.xAxis[0].data=xlist
		const datalist = []
		for (var i = 0; i < xlist.length; i++) {
			const s = res.data.commonHourlyDataList.filter((item) => {
				return item.day == xlist[i]
			})
			datalist.push(s)
		}
		const vl = ["type1", "type2", "type3", "type4"]
		const datall = []
		for (var x = 0; x < vl.length; x++) {
			for (var z = 0; z < datalist.length; z++) {
				const s = datalist[z].filter((item) => {
					return item.type == vl[x]
				})
				datall.push(s)
			}
		}
		const datashuju = []
		for (var s=0;s<datall.length; s++){
			var v=0
			for(var l=0; l<datall[s].length; l++){
				v+=datall[s][l].number1
			}
			datashuju.push(v)
		}
		option5.series[0].data.push(datashuju[0])
		option5.series[1].data.push(datashuju[1])
		option5.series[2].data.push(datashuju[2])
		option5.series[3].data.push(datashuju[3])
	}
}
//用能分析时间
const timee1=()=>{
	console.log(time4.value._rawValue);
	state.energy.dayFrom = time4.value._rawValue[0]
	state.energy.dayTo = time4.value._rawValue[1]
	console.log(time4.value._rawValue);
	getenergy()
}
onMounted(() => {
	getcold_war()
	getproportion()
	getanalyse()
	getheat_balance()
	getenergy()
})

</script>

<style scoped lang="scss">
:deep(.el-card__body) {
	padding: 0;
}

.el-one {
	display: flex;

	.card-one {
		flex: 1;
		margin-right: 4px;

		.title {
			padding: 20px;
			font-size: 20px;
			color: #6d83b7;
			font-weight: 600;
			border-bottom: 2px solid #f3f5f9;
		}

		.nh_css {
			margin: 15px 20px 0;
			font-size: 17px;
			color: #aaacab;
			padding-bottom: 20px;
			border-bottom: 2px dashed #f0f2f7;

			p {
				margin: 10px 0;
				font-size: 17px;
				color: #90979e;

				.pFont {
					font-size: 20px;
					color: #7695d1;
					margin: 0 5px 0 10px;
				}

				.ps {
					font-size: 10px;
				}
			}

			.ms {
				display: flex;
				justify-content: space-between;
			}
		}

		.ech-one {
			position: relative;
			margin: 0 20px 0;
			border-bottom: 2px dashed #f0f2f7;

			.rq {
				position: absolute;
				top: 27px;
				right: 1px;
			}
		}

		.ech-two {
			position: relative;
			padding: 10px 0;
			.rq {
				position: absolute;
				top: 25px;
				right: 10px;
			}
		}
	}

	.card-two {
		flex: 1;
		margin-left: 8px;

		.title {
			padding: 20px;
			font-size: 20px;
			color: #6d83b7;
			font-weight: 600;
			border-bottom: 2px solid #f3f5f9;
		}

		.centt {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2px solid #f3f5f9;

			.titles {
				padding: 20px;
				font-size: 20px;
				color: #6d83b7;
				font-weight: 600;
			}
		}

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 20px;

			p {
				margin: 10px 0;
				font-size: 17px;
				color: #90979e;

				.pFont {
					font-size: 20px;
					color: #7695d1;
					margin: 0 5px 0 20px;
				}

				.ps {
					font-size: 10px;
				}
			}
		}

		.qwe {
			position: relative;
			margin: 15px 20px;


			.reph {
				position: absolute;
				bottom: 16%;
				left: 0;
				font-size: 15px;
				color: #8a8c8a;

				.pFont {
					font-size: 20px;
					color: #7695d1;
				}

				.ps {
					font-size: 10px;
				}

			}
		}

		.shebei {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			font-size: 20px;
			color: #6d83b7;
			font-weight: 600;
			border-bottom: 2px solid #f3f5f9;
		}

		.tabl {
			margin: 10px 20px;
		}
	}
}

.el-two {
	display: flex;
	margin-top: 16px;

	.card-one {
		flex: 1;
		margin-right: 8px;	
		:deep(.el-card){
	height: 100%;
}
		.title {
			padding: 20px;
			font-size: 20px;
			color: #6d83b7;
			font-weight: 600;
			border-bottom: 2px solid #f3f5f9;
		}

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;

			div {
				margin: 10px 0;
				font-size: 15px;
				color: #90979e;

				.pFont {
					font-size: 20px;
					color: #7695d1;
					margin-left: 10px;
				}

				.ps {
					font-size: 10px;
				}
			}
		}

		.head_ss {
			display: flex;
			justify-content: right;
			align-items: center;
			margin-bottom: 10px;
		}
	}

	.card-two {
		flex: 1;
		margin-left: 4px;

		.title {
			padding: 20px;
			font-size: 20px;
			color: #6d83b7;
			font-weight: 600;
			border-bottom: 2px solid #f3f5f9;
		}

		.hea-one {
			display: flex;
			justify-content: space-between;
			font-size: 14px;
			color: #8f9898;
			margin: 15px 0 10px 14px;

			ul {
				list-style: none;
				
				li {
					margin: 10px 0;

					.mm {
						font-size: 20px;
						color: #548cd0;
						margin-left: 10px;
					}

					.nn {
						font-size: 15px;
						margin-left: 5px;
						color: #548cd0;
					}
				}
			}

			.con {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.con {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 0 10px 23px;

			.con-one {
				color: #8f9898;
				font-size: 17px;
				font-weight: 600;
			}
		}

	}
}

.con-two {
	display: flex;
	justify-content: center;
}
</style>
